<template>
    <div :width="isCollapse ? '64px':'240px'" style="height:100%;">
        <!-- 伸缩按钮 -->
        <div style=" text-align: center; background: rgb(230, 230, 153);">
          <div @click="toggleCollapse" style="
                color:#fff;
                letter-spacing: 0.3em;font-weight:bold;
                cursor:pointer; background-color: rgb(214, 214, 155);height:30px;">|||
          </div>
        </div>
        <!-- 侧边菜单条 -->
        <el-menu
        background-color="#fff"
        text-color="black"
        active-text-color="#796AEE"
        unique-opened :collapse="isCollapse">
            <!-- 侧边头信息 -->
            <div class="sidebar-header">
              <div class="sidebar-img">
                <img src="..\..\assets\logo1.jpg" alt="">
              </div>
              <div class="sidebar-detail">
                <h1>身份：管理员</h1>
                <p>轩忆</p>
              </div>
              <div class="sibebar-main">
                MAIN
              </div>
            </div>

            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">

                <!-- 一级菜单 -->
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>{{item.authName}}</span>
                </template>

                <!-- 二级菜单 -->
                <el-menu-item :index="subItem.id + ''" v-for="subItem in item.children" :key=subItem.id>
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{subItem.authName}}</span>
                    </template>
                </el-menu-item>

            </el-submenu>

        </el-menu>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 是否折叠
      isCollapse: false,

      // 菜单列表
      menuList: [
        {
          id: 101,
          authName: '用户管理',
          children: [
            {
              id: 201,
              authName: '用户列表'
            }
          ]
        },
        {
          id: 102,
          authName: '文章管理',
          children: [
            {
              id: 202,
              authName: '文章列表'
            }
          ]
        },
        {
          id: 103,
          authName: '评论管理',
          children: [
            {
              id: 203,
              authName: '评论列表'
            }
          ]
        },
        {
          id: 104,
          authName: '系统设置'
        }
      ]

    }
  },
  methods: {
    // 点击按钮,切换菜单的折叠和展开
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style lang="less" scoped>

.sidebar-header{
  height: 130px;
  box-sizing: border-box;
  background-color: #fff;
  // border: 1px solid red;
  display: flex;
  justify-content: center;
  // align-items: center;
  position: relative;
  padding-top: 10%;
  .sidebar-img{
    width: 55px;
    height: 55px;
    border: 1px solid rgb(214, 214, 155);
    border-radius: 50%;
    margin-right: 15px;
    margin-left: -9%;

    img{
      width: 100%;
      height: inherit;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }
  }
  .sidebar-detail{
    height: 55px;
    box-sizing: border-box;
    padding-top: 3%;
    // border: 1px solid green;

    h1{
      font-size: 1em;
      color: #333;
    }
    p{
      font-size: 0.9em;
      font-weight: 200;
      margin-bottom: 0;
      color: #aaa;
    }
  }
  .sibebar-main{
    width: 100%;
    // background-color: rgb(235, 235, 224);
    position: absolute;
    padding-left: 12%;
    bottom: 5%;
    text-transform: uppercase;
    font-weight: 400;
    color: #ccc;
    font-size: 0.8em;
  }

}

</style>
